<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
<div class="layui-anim layui-anim-upbit layui-fluid">
    <div class="layui-row layui-col-space15 table-search">
        <div class="layui-col-md12">
            <form class="layui-form" id="from-search">
                <div class="layui-form-item">

                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="请输入关键字..." id="keyword" autocomplete="off">
                    </div>

                    <button class="layui-btn" id="btn-search">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>

                    <button class="layui-btn" lay-filter="refresh">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>

                </div>
            </form>
            <div class="layui-btn-group" lay-filter="button-demo">
                <th:block th:each="button : ${button}" th:if="${button.type == 'tool_button'}">
                    <th:block th:if="${button.eventType == 'event_export'}">
                        <a th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:utext="${button.perName}"></a>
                    </th:block>
                    <th:block th:if="${button.eventType != 'event_export'}">
                        <button th:class="${button.perClass +' '+ button.eventType}" th:href="${button.perHref}" th:value="${button.perName}" th:utext="${button.perName}"></button>
                    </th:block>
                </th:block>
            </div>

            <table class="layui-hide" id="table" lay-filter="demo"></table>
        </div>
    </div>
</div>
<div th:include="include::onload"></div>

<script type="text/html" id="barDemo">
    <button th:each="button : ${button}" th:if="${button.type == 'menu_button'}" th:class="${button.perClass}" th:href="${button.perHref}" th:lay-event="${button.eventType}" th:value="${button.perName}" th:utext="${button.perName}"><i th:class="${button.perIcon}"></i></button>
</script>

<script  th:inline="javascript">
    layui.config({
        base: '/js/layer/module/'//模块存放的目录
    }).use(['tabular'], function(){
        var tabular = layui.tabular,
             statetype = [[${diy['state_type']}]],
             menutype = [[${diy['menu_type']}]],
             menubutton = [[${diy['menu_button']}]],
             url = "/admin/system/permission",
             options = {
                elem: '#table',
                url:url,
                id:'per-table',
                treeLinkage:false,
                treeDefaultClose:true,
                treePidName:'parentId',
                treeIdName:'perId',
                treeSpid:0,
                treeColIndex:1,
                onlyId:'perId',
                cols:[
                    [
                        {type:'numbers',title: '序号'}
                        ,{field:'perName',title: '权限名称'}
                        ,{field:'perRoute',title: '权限标识'}
                        ,{field:'perIcon', title: '图标',templet: function (option) {
                            return $.common.initIcon(option.perIcon);
                        }}
                        ,{field:'perHref', title: '链接'}
                        ,{field:'type', title: '类型',templet: function (option) {
                            var date = $.common.initDity(menutype,option.type);
                            if(date == false){
                                return $.common.initDity(menubutton,option.type);
                            };
                            return date;
                        }}
                        ,{field:'stort', title: '排序'}
                        ,{field:'isState',align:'center', title: '状态',templet: function (option) {
                            return $.common.initState(statetype,option.isState,option.perId);
                        }}
                        ,{field:'remarks', title: '备注'}
                        ,{width:'10%', align:'center',fixed: 'right', toolbar: '#barDemo'}
                    ]
                ]
            };
        //初始化表格
        tabular.initTree(options);
        //开关按钮监听
        tabular.switch(url+"/update");
        //工具按钮监听
        tabular.button();

        $('#btn-search').click(function () {
            var keyword = $.common.trim($("#keyword").val());
            var searchCount = 0;
            $('#table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        tabular.expandAll('#table');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            return false;
        });
    });
</script>
</body>
</html>